<template>
	<div class="header-icons swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item , index) in result" :key="index">
				
				<div class="icons-item" v-for="txt in item">
					<img :src="txt.imgURL" />
					<p>{{txt.til}}</p>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	export default {
		props:['IconsList'],
		data(){
			return {
				// IconsList : [
					// {id: 1 , imgURL : require('@/assets/img/icon01.png'),til:'景点门票'},
				// 	{id: 2 , imgURL : require('@/assets/img/icon02.png'),til:'景点门票'},
				// 	{id: 3 , imgURL : require('@/assets/img/icon03.png'),til:'酒'},
				// 	{id: 4 , imgURL : require('@/assets/img/icon04.png'),til:'机票'},
				// 	{id: 5 , imgURL : require('@/assets/img/icon05.png'),til:'攻略'},
				// 	{id: 6 , imgURL : require('@/assets/img/icon06.png'),til:'海外酒店'},
				// 	{id: 7 , imgURL : require('@/assets/img/icon07.png'),til:'低价机票'},
				// 	{id: 8 , imgURL : require('@/assets/img/icon08.png'),til:'汽车票船票'},
				// 	{id: 9 , imgURL : require('@/assets/img/icon09.png'),til:'自由行'},
				// 	{id: 10 , imgURL : require('@/assets/img/icon10.png'),til:'民宿客栈'},
				// 	{id: 11 , imgURL : require('@/assets/img/icon11.png'),til:'信用卡优惠'},
				// 	{id: 12 , imgURL : require('@/assets/img/icon12.png'),til:'旅游团购'}
					
				// ]
			}
		},
		mounted() {
			new Swiper ('.header-icons',{
				//循环滑动
				loop:true,
				observer:true,
				observeParent:true
			})
		},
		computed:{
			result(){
				var arr = [];
				this.IconsList.forEach((item , index)=>{
					var idx = Math.floor( index / 8 );
					if(!arr[idx] ){
						arr[idx] = []
					}
					arr[idx].push(item);
				})
				return arr;
			}
		}
	}
</script>

<style scoped>
	.header-icons {
		width: 100%;
		padding-top: 0.3rem;
		background-color: white;
	}
	.icons-item {
		width: 25%;
		padding-bottom: 25%;
		height: 0;
		text-align: center;
		float: left;
	}
	.icons-item img {
		width: 1.1rem;
		height: 1.1rem;
	}
	.icons-item p {
		font-size: 0.28rem;
		color: #212121;
		margin-top: 0.1rem;
	}
</style>
